<template>
  <div class="login">

    <!-- 登陆表单 -->
    <div class="login-form">
      <h1 class="title" style="margin-bottom: 30px">
        <i class="el-icon-shopping-cart-full"></i>
        超市系统登录
      </h1>
      <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          size="large"
          >
        <el-form-item prop="username">
          <el-input type="text" v-model="loginForm.username"  minlength="20" prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="password" v-model="loginForm.password" prefix-icon="el-icon-key" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
          <el-button type="primary" @click="register('loginForm')">注册</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import router from "@/router";

export default {
  name:'login',
  data() {
    return {
      loginForm: {
        username: "root",
        password: "123456"
      },
      loginRules: {
        //用户名
        username: [
          { required: true, message: "请输入账户名", trigger: "blur" },
          { min: 3, max: 12, message: "长度在3到12个字符之间", trigger: "blur" }
        ],
        //密码
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 12, message: "长度在3到12个字符之间", trigger: "blur" }
        ]
      }
    }
  },
  methods:{
    // 登录
    submitForm(loginForm){
        this.$refs[loginForm].validate(async valid => {
          if(!valid)  return;
          const { data:res } = await this.$http.post('user/login',this.loginForm);
          console.log(res)
          // 这里的code
          if(res.code !== '200'){
            this.$message.error(res.message);
            return;
          }
          // 存入token于vuex中 给router判断
          // this.$store.state.token = res.token;
          // this.$store.state.username = this.loginForm.username
          this.$store.state.userInfo = res.data[0];
          window.sessionStorage.setItem('token',res.token);
          window.sessionStorage.setItem('username',this.loginForm.username)
          // console.log(this.$store.state.token);
          this.$message.success(res.message);
          setTimeout(() => {
            this.$router.push("/index")
          },500)
        })
    },
    // 注册
    register(loginForm){
      this.$refs[loginForm].validate(async valid => {
        if(!valid) return;
        const {data : res } = await this.$http.post('user/register',this.loginForm);
        console.log(res)
      })
    },
    resetForm(loginForm){
      // 重置表单信息
      this.$refs[loginForm].resetFields();
    },
    // 钻牛角尖的下场
    forNotLoginBaka(){
      let message = sessionStorage.getItem('loginStateMessage');
      if(message != null){
        this.$message.info(message)
      }
    }
  },


}
</script>
<style lang="less">
html,body{
  height:100%;
  width: 100%;
  overflow:hidden;
}
.login {
  background:url("../../assets/bg.jpg");
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-form {
    width: 600px;
    height: 350px;
    background-color: rgba(255,255,255,0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .title {
      text-align: center;
      color: rgb(86,86,86);
      font-size: 20px;
    }
    .el-input{
      width: 300px;
    }
    .btns{
      margin-top: 30px;
      text-align: center;
    }
    .el-form-item__label {
      color: #000;
    }
  }
}
</style>